<template>
  <div>
    <!-- 调拨单审核 -->
    <el-dialog
      v-el-drag-dialog
      :title="`计划充装单审核: ${temp.fillCode} `"
      :visible.sync="visible"
      width="1024px"
      @close="reset"
    >
      <el-form
        ref="dataForm"
        class="form"
        :model="temp"
        label-width="100px"
        label-position="right"
      >
        <el-form-item label="仓库名称:">
          <el-input v-model="temp.storeName" disabled />
        </el-form-item>
        <el-form-item label="创建时间:">
          <el-input v-model="createTime" disabled />
        </el-form-item>
        <el-form-item label="创建人:">
          <el-input v-model="temp.createUser" disabled />
        </el-form-item>
        <el-form-item label-width="100px" label="备注:" style="width: 100%;">
          <el-input v-model="temp.remark" type="textarea" :rows="3" show-word-limit maxlength="100" disabled />
        </el-form-item>
        <el-form-item label-width="0" style="width: 100%;">
          <lb-table
            ref="lbTable"
            border
            highlight-current-row
            element-loading-text="加载中"
            :column="tableData.column"
            :data="tableData.data"
            :pagination="false"
          />
          <div class="total">合计：{{ totalCount }}</div>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button
          type="primary"
          :loading="loading1"
          @click="pass(2)"
        >通过</el-button>
        <el-button
          type="danger"
          :loading="loading2"
          @click="pass(3)"
        >驳回</el-button>
        <el-button @click="reset">关闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import {
    plannedFillingOrderDetail,
    plannedFillingOrderAudit
  } from '@/api'
  import { parseTime } from '@/utils'

  export default {
    name: 'audit',
    props: {

    },
    data() {
      return {
        visible: false,
        temp: {
          storeName: '',
          createTime: '',
          createUser: '',
          remark: ''
        },
        loading1: false,
        loading2: false,
        tableData: {
          column: [
            {
              type: 'index'
            },
            {
              prop: 'goodsName',
              label: '商品名称'
            },
            {
              prop: 'goodsSpec',
              label: '规格型号'
            },
            {
              prop: 'gdCount',
              label: '数量'
            }
          ],
          data: []
        }
      }
    },
    computed: {
      // 创建时间
      createTime: function() {
        return (
          this.temp.createTime &&
          parseTime(this.temp.createTime, '{y}-{m}-{d} {h}:{i}:{s}')
        )
      },
      totalCount() {
        return this.tableData.data.reduce((pre, cur) => {
          return pre + cur.gdCount
        }, 0)
      }
    },
    created() {},
    methods: {
      async open(temp, type) {
        console.log(temp)
        this.temp = temp
        this.loading1 = false
        this.loading2 = false
        await this.getBillInfo()
        return new Promise(resolve => {
          this.resolve = resolve
          this.visible = true
        })
      },
      async getBillInfo() {
        const res = await plannedFillingOrderDetail({
          fillCode: this.temp.fillCode
        })
        if (res && res.data) {
          this.temp = res.data
          this.tableData.data = res.data.detailInfoList
        }
      },
      // 通过
      async pass(billStatus) {
        this.$refs.dataForm.validate(valid => {
          if (!valid) return
          this.submit({
            fillCode: this.temp.fillCode,
            billStatus: billStatus
          })
        })
      },
      async submit(params) {
        // console.log('params', params)
        if (params.billStatus === 2) {
          this.loading1 = true
        } else if (params.billStatus === 3) {
          this.loading2 = true
        }
        const res = await plannedFillingOrderAudit(params)
        if (res.status === 200) {
          this.visible = false
          this.$notify({
            title: '提示',
            message: '操作成功',
            type: 'success',
            duration: 2000
          })
          this.resolve(true)
        } else {
          this.$message.warning(res.data.message)
          this.resolve(false)
        }
      },
      // 关闭
      reset() {
        this.temp = {
          storeName: '',
          createTime: '',
          createUser: '',
          remark: ''
        }
        this.visible = false
        this.$nextTick(() => {
          this.$refs.dataForm.clearValidate()
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
.form {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  /deep/.el-date-editor.el-input,
  .el-date-editor.el-input__inner {
    width: 184px;
  }
}
.total {
  margin-top: 10px;
  font-size: 16px;
  font-weight: 600;
  color: #F00;
}
</style>
